<template>
  <div class="bgwhite">
    <app-header :showLogin="false">
      <div class="">
        <router-link to="/">
        <img src="../assets/logo.png" />
        </router-link>
      </div>
    </app-header>
    <div class="register-wrapper hd">
      <div class="register-main">
        <h2 class="center">填写注册信息</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px">
          <el-form-item label="手机号" prop="phoneNumber" required>
            <el-input v-model="ruleForm.phoneNumber" placeholder="请输入有效的手机号" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="vcode"  required>
            <el-col :span="15">
              <el-input v-model="ruleForm.vcode" placeholder="请输入验证码" :maxlength="6"></el-input>
            </el-col>
            <el-col :span="1">&nbsp;
            </el-col>
            <el-col :span="8">
              <el-button type="default"  :disabled="vcodeDisabled" style="width:100%;" @click="getVcode">{{vcodeLabel}}</el-button> 
            </el-col>
          </el-form-item>
          <!-- <el-form-item label="用户名" prop="userName" required>
            <el-input v-model="ruleForm.userName" placeholder="请输入用户名" ></el-input>
          </el-form-item> -->
          <el-form-item label="设置密码" prop="password" required>
            <el-input v-model="ruleForm.password" type="password" placeholder="6-20位数字或字母密码" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword" required>
            <el-input v-model="ruleForm.confirmPassword"  type="password" placeholder="请确认密码" :maxlength="20"></el-input>
          </el-form-item>
           <!-- <el-form-item label="证件类型" prop="cardType" required>
             <el-select v-model="ruleForm.cardType" style="width:100%;">
              <el-option label="身份证" :value="1"></el-option>
              <el-option label="护照" :value="2"></el-option>
              <el-option label="香港通行证" :value="3"></el-option>
              <el-option label="台湾通行证" :value="4"></el-option>
             </el-select>
          </el-form-item> -->
           <!-- <el-form-item label="身份证号" prop="cardNumber" required>
            <el-input v-model="ruleForm.cardNumber"  placeholder="请输入有效的证件号码" :maxlength="18"></el-input>
          </el-form-item>
           <el-form-item label="姓名" prop="realName" required>
            <el-input v-model="ruleForm.realName"  placeholder="预约服务采用实名制" :maxlength="6"> </el-input>
          </el-form-item>
           <el-form-item label="性别" prop="sex" required>
              <el-radio class="radio" v-model="sex" label="1">男</el-radio>
              <el-radio class="radio" v-model="sex" label="2">女</el-radio>
          </el-form-item>
           <el-form-item label="出生年月" prop="bornDate" required>
             <el-date-picker
              v-model="bornDate"
              type="date"
              placeholder="请选择出生年月"
              style="width:100%;">
            </el-date-picker>
          </el-form-item> -->
            <!-- <el-form-item label="验证码" prop="imgCode" required>
            <el-col :span="16">
              <el-input v-model="ruleForm.imgCode" placeholder="请输入验证码" ></el-input>
            </el-col>
            <el-col :span="1">&nbsp;
            </el-col>
            <el-col :span="7">
              imgcode
            </el-col>
          </el-form-item> -->
           <!-- <el-form-item label="邮箱" prop="email" >
            <el-input v-model="ruleForm.email" placeholder="用于密码找回及预约挂号验证码接收"></el-input>
          </el-form-item>        -->
          <el-form-item label="">
            <a href="javascript:;" @click="submitForm('ruleForm')"  class="common-main-button">注 册</a>
          </el-form-item>
        </el-form>
      </div>
    </div>
        <app-footer></app-footer>   

      <!-- dialog  -->
      <div class="mask" v-if="mask_shown">
        <div class="alert_box four-cornor-wrapper">
          <i class="l"></i><i class="r"></i><i class="t"></i><i class="b"></i>
          <div class="box_title">
            <span>用户协议</span>
          </div>
          <div class="msg_content">
            <p v-for="msg in REGISTER_TIPS" v-bind:class="msg.class" :key="msg">{{msg.content}}</p>
          </div>
          <div class="center">
            <a href="javascript:" class="common-main-button"  @click="argeeHandle">同意</a>
            <a href="javascript:" class="common-sub-button" @click="disArgeeHandle">不同意</a>
          </div>
        </div>
      </div>
      <!-- tips  -->
      <el-dialog title="提示" :visible.sync="dialog.show" size="tiny" >
        <span>{{dialog.message}}</span>
        <span slot="footer" class="dialog-footer">
          <a href="javascript:;" @click="dialog.fn" class="common-main-button">确 定</a>
        </span>
      </el-dialog>

  </div>
</template>
<script>
import AppFooter from '../components/AppFooter'
import AppHeader from '../components/AppHeader'
import {testPhone} from '../common/js/util'
import {REGISTER_TIPS, commonAjax, TENANT_ID, ROLE_ID, PLATFORM_PREFIX,vaildAjax} from '../api/api'
import md5 from 'md5'
import {getBirthdayFromIdCard, getSexFromIdCard, testCardNumber, testPassword} from '../common/js/util'
export default {
  computed: {
    bornDate () {
      return getBirthdayFromIdCard(this.ruleForm.cardNumber)
    },
    sex () {
      return getSexFromIdCard(this.ruleForm.cardNumber)
    }
  },
  data () {
    return {
      loginArr:[],
      vcodeDisabled: false,
      vcodeLabel: '获取验证码',
      mask_shown: true,
      REGISTER_TIPS: REGISTER_TIPS,
      ruleForm: {
        phoneNumber: '',
        vcode: '',
        // userName: '',
        password: '',
        confirmPassword: '',
        // cardType: 1,
        cardNumber: '',
        realName: ''
        // imgCode: '',
      },
      rules: {
        phoneNumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, message: '请输入正确的手机号码' }
        ],
        vcode: {required: true, message: '验证码不能为空'},
        // userName: {required: true, message: '用户名不能为空'},
        password: [
          {required: true, message: '密码不能为空'},
          { min: 6, max: 20, message: '密码长度位6-20字符', trigger: 'blur' }
        ],
        confirmPassword: [
          {required: true, message: '密码不能为空'},
          { min: 6, max: 20, message: '密码长度位6-20字符', trigger: 'blur' }
        ],
        cardNumber: {required: true, message: '证件号码不能为空'},
        realName: {required: true, message: '真实姓名不能为空'}
        // imgCode: {required: true, message: '验证码不能为空'}
      },
      dialog: {
        show: false,
        message: '',
        fn: () => {}
      }
    }
  },
  mounted () {
    this.loginArr = JSON.parse(localStorage.getItem('myLoginArr'))
  },
  methods: {
    submitForm (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (!testPassword(this.ruleForm.password) || !testPassword(this.ruleForm.confirmPassword)) {
            this.$message({
              message: '密码为6-20位数字或字母组合',
              type: 'error'
            })
            return
          }
          for (let i = 0; i < this.loginArr.length; i++) {
            const element = this.loginArr[i];
            if(element.phoneNumber == this.ruleForm.phoneNumber){
                this.$message({
                  message: '该手机号已注册,请直接登录!',
                  type: 'error'
                })
                return
            }
          }
          // if (!testCardNumber(this.ruleForm.cardNumber)) {
          //   this.$message({
          //     message: '身份证号码格式有误',
          //     type: 'error'
          //   })
          //   return
          // }
          if (this.ruleForm.password !== this.ruleForm.confirmPassword) {
            this.$message({
              message: '两次密码输入不一致',
              type: 'error'
            })
            return
          }
          var obj = { 
            phoneNumber: this.ruleForm.phoneNumber, 
            pwd : this.ruleForm.password, 
            personName : this.ruleForm.phoneNumber
          }
          this.loginArr.push(obj)
          localStorage.setItem('myLoginArr', JSON.stringify(this.loginArr))
          localStorage.phoneNumber = this.ruleForm.phoneNumber
          this.dialog = {show: true, message: '注册成功，请登录', fn: () => {
            this.$router.push('/')
          }}
          // this.$store.commit('UPDATE_LOADING')
          // commonAjax([
          //   TENANT_ID,
          //   this.ruleForm.phoneNumber,
          //   md5(this.ruleForm.password),
          //   this.ruleForm.vcode,
          //   ROLE_ID,
          //   this.ruleForm.realName,
          //   this.sex,
          //   this.bornDate,
          //   this.ruleForm.cardNumber
          // ], `${PLATFORM_PREFIX}.registerService`, 'registerWebQuick').then(res => {
          //   this.$store.commit('UPDATE_LOADING')
          //   if (res.data.code === 200) {
          //       localStorage.phoneNumber = this.ruleForm.phoneNumber
          //       this.dialog = {show: true, message: '注册成功，请登录', fn: () => {
          //       this.$router.push('/')
          //     }}
          //   } else {
          //     this.$message({
          //       message: res.data.msg,
          //       type: 'error'
          //     })
          //   }
          // })
        } else {
          return false
        }
      })
    },
    argeeHandle () {
      this.mask_shown = false
    },
    disArgeeHandle () {
      this.$router.push('/')
    },
    getVcode () {
      if (testPhone(this.ruleForm.phoneNumber)) {
        this.vcodeDisabled = true
        // var par = {
        //   mobile: this.ruleForm.phoneNumber,
        //   "roleId": 'patient',
        //   ip:""
        // }
        // vaildAjax([par], 'hcn.weChatpService', 'captcha').then(res => {
        //   if (res.data.code === 200) {
        //     this.timeout()
        //   } else {
        //     this.vcodeDisabled = false
        //     this.dialog = {show: true, message: res.data.msg, fn: () => this.dialog.show = false}
        //   }
        // })
        commonAjax([TENANT_ID, this.ruleForm.phoneNumber, ROLE_ID], `${PLATFORM_PREFIX}.registerService`, 'registerSmsCode').then(res => {
          if (res.data.code === 200) {
            this.timeout()
          } else {
            this.vcodeDisabled = false
            this.dialog = {show: true, message: res.data.msg, fn: () => this.dialog.show = false}
          }
        })
      } else {
        this.$message({
          message: '手机号码格式有误',
          type: 'error'
        })
      }
    },
    timeout () {
      let start = 60
      let countDown = () => {
        this.vcodeTimer = setTimeout(() => {
          this.vcodeLabel = (start--) + 's'
          countDown()
          if (start <= 0) {
            this.vcodeDisabled = false
            this.vcodeLabel = '获取验证码'
            clearTimeout(this.vcodeTimer)
          }
        }, 1000)
      }
      countDown()
    }
  },
  components: { AppFooter, AppHeader }
}
</script>

<style lang="less">
@import '../common/css/vars.less';
.register-wrapper {
  height: auto;
  background:#FFFAF7 url(../assets/bg_login.png) no-repeat 100px center;
  background-size: 400px;
  margin-bottom: 50px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .1);
  .register-main{
    padding: 20px 40px 20px 600px;
    h2{
      margin: 20px 0;
      padding-left: 60px;
    }
  }
}
</style>
